import Vue from "vue";
import Vuex from "vuex";

// Vuex是vue的插件
// 需要use使用
Vue.use(Vuex);

// 定义vuex内容

// 用来集中式存储多个组件共享状态数据的容器
const state = {
  count: 0,
};

// 用来存储只读的计算属性数据
const getters = {
  isOddOrEven(state) {
    return state.count % 2 === 1 ? "奇数" : "偶数";
  },
};

// 包含n个用来间接修改state数据（发送请求）的方法
const actions = {
  increment(store) {
    // 触发mutations函数
    // 调用commit
    // console.log(store);
    store.commit("INCREMENT", 1);
  },
  decrement({ commit }) {
    commit("DECREMENT", 1);
  },
  incrementIfOdd({ commit, state }) {
    // 判断当前count是否是奇数
    if (state.count % 2 === 1) {
      commit("INCREMENT", 1);
    }
  },
  incrementAsync({ commit }) {
    setTimeout(function() {
      commit("INCREMENT", 1);
    }, 1000);
  },
};

// 包含n个用来直接修改state数据的方法
const mutations = {
  // mutaions函数名称一般就将action函数名转换大写
  INCREMENT(state, num) {
    // state就是vuex管理的所有数据
    state.count += num;
  },
  DECREMENT(state, num) {
    state.count -= num;
  },
};

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
});

export default store;
